<!-- 全屏切换组件 -->
<template>
  <div class="full_screen">
    <i
      class="iconfont c_p f_z_20"
      @click="doFullScreenAciton"
      :class="[isFullScreen ? 'icon-cancel-full-screen' : 'icon-quanping']"
    ></i>
  </div>
</template>

<script setup>
//引入全屏插件
import screenfull from "screenfull";

//是否全屏的标识
let isFullScreen = ref(false);

//全屏和退出全屏的操作
const doFullScreenAciton = () => {
  //切换全屏
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
  //同步图标状态
  isFullScreen.value = !isFullScreen.value;
};
</script>

<style lang="scss" scoped>
.full_screen {
}
</style>
